<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
// 自定义模块  仓库 组件
import CartCard from "@/components/cart/CartCard.vue";
import useCartStore from "@/stores/cart.js";
const cartStore = useCartStore();

// 订单
const orderForm = (name) => {
  router.push({
    name: "orderConfirmation",
    query: {
      shopName: name,
    },
  });
};
</script>

<template>
  <div class="cart_list">
    <div class="cart_list_header">
      我的全部购物车
      <span>({{ cartStore.cartList.length }})</span>
    </div>
    <div
      class="cart_list_content"
      v-for="item in cartStore.cartList"
      :key="item.name"
    >
      <div class="cart_list_content_item">
        <CartCard :shopCartInfo="item" @click="orderForm(item.name)" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0.5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: 0.08rem 0.18rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: 0.24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &_content {
    margin-top: 0.58rem;
  }
}
</style>